
import { useEffect, useState } from "react";
import { Button, Form, Input, message } from 'antd';
import { useNavigate } from "react-router-dom";
import { $Http } from "../../network";
import leftBorderImage from "../../assets/image/loginPage-left-border.png"
import rightBorderImage from "../../assets/image/loginPage-right-border.png"
import logoImage from "../../assets/image/loginPage-logo.png"
import userImage from "../../assets/image/loginPage-user.png"

import lessModule from "./index.module.less"
import { useForm } from "antd/es/form/Form";
import FormItemPasswordInputComponent from "../../component/formItemPasswordInput";


// 登录页面
const LoginPage: React.FC = () => {
    const [form] = useForm()
    const navigate = useNavigate();

    // 登录数据 接口

    const initialValuesData = {
        username: "atn",
        password: "123456",
    }

    // 表单验证成功并登录
    const onFinish = (data: object) => {
        $Http("login", data).then((res) => {
            sessionStorage.setItem("bearerToken", res["token"]); // 缓存token
            navigate('/home');     // 跳转到首页
        })
    };

    useEffect(() => {
        // 清除缓存的token
        sessionStorage.clear()
    }, [])

    return (
        <div className={lessModule["loginPage"]}>

            <main className={lessModule["loginPage-main"]}>
                <img src={leftBorderImage} />
                <div className={lessModule["loginPage-main__card"]}>
                    <img className={lessModule["main-card__logo"]} src={logoImage} />
                    <p className={lessModule["main-card__title"]}>电网主变直流偏磁智能监测系统</p>
                    <Form
                        className={lessModule["main-card__form"]}
                        form={form}
                        initialValues={initialValuesData}
                        onFinish={onFinish}
                    >
                        <Form.Item
                            name="username"
                            rules={[{ required: true, message: '请输入用户名！' }]}
                        >
                            <Input prefix={<img src={userImage} />} placeholder="请输入用户名！" autoComplete="off" />
                        </Form.Item>

                        <FormItemPasswordInputComponent name="password" placeholder="请输入密码！" />

                        <Form.Item >
                            <Button className={lessModule["main-form__submit"]} type="primary" htmlType="submit">登录</Button>
                        </Form.Item>
                    </Form>
                </div>
                <img src={rightBorderImage} />
            </main>
            <footer className={lessModule["loginPage-footer"]}>
                <div>V1.0技术支持： Copyright© 2024 艾特能电气，All Rights Reserved.</div>
            </footer>
        </div>
    )
}

export default LoginPage